<template>
  <div class="app-container">
    <div class="oppinion" v-if="baseForm.missionStatus <0">
      <div class="oppinion-title">驳回原因：</div>
      <div class="oppinion-info">{{ baseForm.apprOppinion }}</div>
    </div>
    <div style="display: flex;flex-flow: row nowrap;margin-left: 9%">
      <div style="border:1px;background-color: #4e8dff; width: 6px;height: 20px"></div>
      <span style="margin-left: 10px">基本信息</span>
    </div>
    <el-form ref="baseForm" :model="baseForm" :rules="baseFormRules" label-width="140px"
             style="margin-left: 25%;">
      <el-row>
        <el-col :span="16">
          <el-form-item label="培训标题" prop="title">
            <el-input v-emoji v-model="baseForm.title" placeholder="请输入培训标题"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="16">
          <el-form-item label="培训内容" prop="contents">
            <editor v-model="baseForm.contents" :min-height="192"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="16">
          <el-form-item label="附件" prop="attachFile">
            <file-upload v-model="baseForm.attachFile"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="16">
          <el-form-item label="培训时间" prop="trainingTime">
            <el-date-picker
              v-model="baseForm.trainingTime"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="请选择培训时间"
              default-time="9:00:00"
              :picker-options="datePickerValid"
              style="width: 100%"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="16">
          <el-form-item label="培训地点" prop="trainingPlace">
            <el-input v-emoji v-model="baseForm.trainingPlace" placeholder="请输入培训地点"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="16">
          <el-form-item label="培训层级" prop="levels">
            <el-select
              v-model="baseForm.levels"
              placeholder="请选择培训层级"
              clearable
              style="width: 100%"
            >
              <el-option
                v-for="dict in dict.type.training_level"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="16">
          <el-form-item label="培训单位" prop="unit">
            <el-input v-emoji v-model="baseForm.unit" placeholder="请输入培训单位"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="16">
          <el-form-item label="培训描述" prop="describe">
            <el-input v-emoji v-model="baseForm.describe" placeholder="请输入培训描述"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <common-form ref="taskRef" ruleTitle="奖励规则" receiveTitle="参与人设置" labelName="参与人员" :ruleType="2" :isUpdate="isUpdate"
                 :examineId="examineId" :useTreeAll="true"></common-form>
    <!--    提交审核流转记录-->
    <appr-records v-if="examineId" ref="apprRecordsRef" :examineId="examineId" :opreationType="1" ></appr-records>
    <div style="margin: 2% auto auto 40%;">
      <el-button class="form_button_item" @click="closeBtnHandler">取消</el-button>
      <el-button class="form_button_item" :loading="saveBtnLoading" type="primary" @click="submitForm">保存
      </el-button>
    </div>
  </div>
</template>

<script>
import commonForm from "@/views/examine/commonForm";
import apprRecords from "@/views/examine/apprRecords"
import {addTraining, getTraining, updateTraining} from "@/api/examine/training/api";

export default {
  name: "Add",
  dicts: [
    "training_level",
  ],
  components: {
    commonForm,
    apprRecords
  },
  data() {
    return {
      datePickerValid: {
        disabledDate(time) {
          return time.getTime() <= new Date().getTime() - 8.64e7;
        }
      },
      title: "",
      cycleVal: '',
      deptName: '',
      isUpdate: false,
      rulesData: {},
      receiveData: {},
      saveBtnLoading: false,
      // 表单参数
      baseForm: {},
      examineId: '',
      // 表单校验
      baseFormRules: {
        title: [
          {required: true, message: "请填写任务标题", trigger: "blur"}
        ],
        contents: [
          {required: true, message: "请填写任务内容", trigger: "blur"}
        ],
        trainingTime: [
          {required: true, message: "请选择培训时间", trigger: "change"}
        ]
      },
      examineYearOptions: {
        disabledDate: (time) => {
          const date = new Date()
          const year = date.getFullYear()
          const timeYear = time.getFullYear()
          return year > timeYear + 3
        }
      }
    }
  },
  created() {
    this.initPage();
  },
  methods: {
    initPage() {
      this.reset()
      this.examineId = this.$route.query.id;
      if (this.examineId) {
        this.isUpdate = true;
        getTraining(this.examineId).then(resp => {
          this.baseForm.id = this.examineId
          this.baseForm = resp.data
        })
      }
    },
    submitForm() {
      Promise.all([this.$refs.taskRef.getCommonForm(), this.$refs["baseForm"].validate()]).then(resp => {
        this.saveBtnLoading = true;
        Object.assign(this.baseForm, resp[0])
        if (this.baseForm.id != null) {
          updateTraining(this.baseForm).then(response => {
            this.$modal.msgSuccess("修改成功");
            // 清空页签缓存
            this.$tab.clearKeepAlivePage('Index')
            this.closeBtnHandler();
          }).finally(() => {
            this.saveBtnLoading = false;
          })
        } else {
          addTraining(this.baseForm).then(response => {
            this.$modal.msgSuccess("保存成功");
            // 清空页签缓存
            this.$tab.clearKeepAlivePage('Index')
            this.closeBtnHandler();
          }).finally(() => {
            this.saveBtnLoading = false;
          })
        }
      });
    },
    closeBtnHandler() {
      this.reset()
      // 关闭当前页面
      this.$tab.closeOpenPage();
      // 刷新列表页面
      this.$tab.refreshPage({path: "/training/index"});
    },
    // 表单重置
    reset() {
      this.baseForm = {
        title: undefined,
        contents: undefined,
        attachFile: undefined,
        trainingTime: undefined,
        trainingPlace: undefined
      };
      this.resetForm("baseForm");
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep .el-input.is-disabled .el-input__inner {
  background-color: #fff;
  color: #606266;
}

::v-deep .el-textarea.is-disabled .el-textarea__inner {
  background-color: #fff;
  color: #606266;
}

::v-deep .el-radio__input.is-disabled + span.el-radio__label {
  background-color: #fff;
  color: #606266;
}
.oppinion {
  padding: 10px 15px;
  position: relative;
  left: 10%;
  top: 0px;
  margin-bottom: 2%;
  width: 1162px;
  height: auto;
  background: inherit;
  background-color: inherit;
  background-color: rgba(255, 169, 0, 1);
  border: none;
  border-radius: 2px;
  box-shadow: none;
  font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
  font-style: normal;
  text-align: left;
&-title{
   font-weight: bold;
   font-size: 16px
 }
&-info{
   padding: 5px 10px 0px 68px;
   line-height: 1.5;
 }
}
</style>
